

import { Component } from "react";
import type { ReactNode } from 'react'


class Header extends Component {

    props = {
        left: <></>,
        right: <></>,
        children: ''//如果组件中间有其他内容，用childer固定接收
    }

    render() {
        return <header>

            <h1>{this.props.left}  西瓜  {this.props.right}</h1>

        </header>
    }
}
export default class App extends Component {

    state = {
        title: '辣条'
    }

    render(): ReactNode {
        return <>
            <div>
                <h1>父组件 -- {this.state.title}</h1>
                <hr />
                <Header left={<del>￥199.99</del>} right={<span>￥99.99</span>}> </Header>

            </div>
        </>
    }
}